<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box2">
            <div class="newCode">
                <Step
                    ref="step"
                    :current-step="currentStep"
                    :steps-label="stepsLabel"
                    :total-steps="stepsLabel.length"></Step>
            </div>
            <div class="container">
                <div v-show="currentStep === 1">
                    <Activity ref="ActivityRef" :page-type="pageType" :page-id="pageId" @next="next"></Activity>
                </div>
                <div v-show="currentStep === 2">
                    <BasicSet
                        ref="basicSet"
                        :page-type="pageType"
                        :page-id="pageId"
                        @next="next"
                        @prev="bacj"></BasicSet>
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <template v-if="currentStep == 1">
                <el-button v-if="currentStep == 1" @click="cancelHandle">取消</el-button>
                <el-button type="primary" @click="nextStepHandle">下一步</el-button>
            </template>
            <template v-else>
                <el-button @click="prevStepHandle">上一步</el-button>
                <el-button v-if="pageType != 'look'" type="primary" @click="saveHandle">保存</el-button>
                <el-button v-else type="primary" @click="saveHandle">返回</el-button>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import Step from '@/components/Step.vue';
import Activity from './components/Activity.vue';
import BasicSet from './components/BasicSet.vue';
import { ref, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from '@/store';
const store = useStore();
const route = useRoute();
const basicSet = ref(); // 基础数据
const welcome = ref(); // 欢迎语数据
const isPre = ref(false); // 是否为上一步

const currentStep = ref(1);
const pageType = ref(route.query.type);
const pageId = ref(route.query.id);
const step = ref();
const stepsLabel = ref([
    { title: '活动信息', stepIndex: 1 },
    { title: '高级设置', stepIndex: 2 }
    // { title: "高级设置", stepIndex: 3 },
]);
const scrollbarRef = ref<any>(null);
/**
 * @description: 滚动到顶部
 */
const setScrollTopHandle = () => {
    nextTick(() => {
        scrollbarRef.value?.setScrollTop(0);
    });
};
// 下一步
const next = () => {
    isPre.value = false;
    currentStep.value++;
    step.value.next();
    setScrollTopHandle();
};
// 上一步
const bacj = () => {
    isPre.value = true;
    currentStep.value--;
    step.value.back();
    setScrollTopHandle();
};
const ActivityRef = ref<any>(null);
/**
 * @description: 取消
 */
const cancelHandle = () => {
    ActivityRef.value.cancel();
};
/**
 * @description: 上一步
 */
const prevStepHandle = () => {
    basicSet.value.prev();
};
/**
 * @description: 下一步
 */
const nextStepHandle = () => {
    ActivityRef.value.next();
};
/**
 * @description: 保存
 */
const saveHandle = () => {
    basicSet.value.saveWel();
};
watch(
    () => currentStep.value,
    (val: number) => {
        if (val == 2 && isPre.value == false && basicSet.value.isNext) {
            basicSet.value.getLook();
        } else if (val == 3 && isPre.value == false && welcome.value.isNext) {
            welcome.value.getLook();
        }
    },
    { deep: true }
);
</script>

<style lang="scss" scoped>
.newCode {
    padding: 21px;
    border: 1px solid #eaeaea;
    border-top: none;
    border-radius: 1px;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.container {
    width: 100%;
    min-height: calc(100vh - 288px);

    // position: relative;
    padding: 20px 20px 26px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    border-radius: 1px;
    opacity: 1;
    border: 1px solid #eaeaea;
    border-bottom: none;
    background: #fff;

    // display: flex;
    // align-items: center;
}

.h_g {
    // width: 100%;
    height: calc(100vh - 300px);
    position: relative;
}
</style>
